<template>
    <div id="change-textbook" class="flex-center">
        <div class="textbook-containter">
            <div class="publishType">
                <div>
                    <button :class="[activeCourse == 0 ? 'activePublish' : '']"  @click="changeCourse(0)">同步课程</button>
                    <button :class="[activeCourse == 1 ? 'activePublish' : '']"  @click="changeCourse(1)">拓展课程</button>
                </div>
                <div class="myCourse">
                    <img src="./img/myCourse.png" style="width: 18px;height: 18px;margin-right: 3px;" alt="">
                    <div class="s-14" @click="changeCourse(2)">我的课程</div>
                </div>
                <img  class="visible pointer" src="./img/close.png" alt="" @click="close" />
            </div>
            <div class="edtion">
                <div v-for="(v,i) in edition" :key="v.id"
                    :class="[ 's-14','t-color-m','pointer','item-content',{'item-content-active':active===i}]"
                    @click="changeEdition(i)">
                    {{v.name}}
                </div>
                <!-- <div :class="[activeCourse == 0 ? 'initLeft0' : 'initLeft1']" v-if="bookList.length > 0" class="activeBottom"></div> -->
            </div>
            <div class="textbook">
                <div class="book-container f-1">
                    <div class="book">
                        <div v-for="(v,i) in bookList" :key="v.id" class="book-item pointer" :data-checked="v.checked" :class="v.checked ? 'checkedBorder' : ''"
                            @click="(e)=>check(e,i)">
                            <div class="authorize-logo" v-if="v.isAuthorize === '已授权'" >已授权</div>
                            <div class="no_authorize" v-if="v.isAuthorize === '未授权'" >未授权</div>
                            <img class="thump-img" :src="computeThumb(v.thumb)" alt="" @error="error">
                            <div class="book-message pointer s-14" :class="v.checked ? 'checkedMsg' : '' ">{{v.name}}</div>
                            <div class="checked pointer" v-if="v.checked">
                                <img src="../../../assets/img/home/checked.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="midwhiteBg"><img src="./img/whiteBg.png" alt=""></div>
                <div class="bottomwhiteBg"><img src="./img/whiteBg.png" alt=""></div> -->
            </div>
            <button class="complete-btn pointer" @click.prevent="submit">完成</button>
        </div>
    </div>
</template>

<script>
import { SqlLib } from '../../../../../../static/lib/sqlite/SqlLib'
import { SqlLibBook } from '../../../../../../static/lib/sqlite/service/SqlLibBook'
import { SqlLibUser } from '../../../../../../static/lib/sqlite/service/SqlLibUser'
import { Book } from '../../../../../../static/lib/sqlite/model/Book'
const cryUtil = require('../../../../../../static/utils/CrypUtil')
import bus from '../../../assets/js/bus.js'
import store from '@/content/store/index.js'
const path = require("path");
export default {
    props: ['visible', 'bookId'],
    inject: ['initPage'],
    data () {
        return {
            bookList: [],
            edition: [],
            chooseBookList: [],
            editionId: '',
            eduLevelId: '',
            activeCourse:0,
            active: 0,
            initActiveIndex: -1,
            checkId:'',
        }
    },
    created () {
        let sqlLib = SqlLib.getInstance(window.$DBDIR)
        let user = SqlLibUser.queryCurrentUser(sqlLib)
        let editionArr = SqlLibBook.queryPublisher(sqlLib, user.eduLevelId)
        let publisherId = SqlLibBook.queryPublisherIdBybookId(sqlLib, this.bookId)
        editionArr.forEach(item=>{
            if (item.id == publisherId) {
                this.activeCourse = Number(item.reverse1)
            }
        })
        this.initActiveBook()
    },
    computed: {
    },
    methods: {
        changeCourse(msg){
            this.activeCourse = msg
            switch (msg) {
                case 0:
                this.initActiveBook ()
                this.changeEdition(0)
                    break;
                case 1:
                this.initActiveBook ()
                this.changeEdition (0)
                    break;
                case 2:
                let sqlLib = SqlLib.getInstance(window.$DBDIR)
                let user = SqlLibUser.queryCurrentUser(sqlLib)
                user.bookId = user.id
                sqlLib.updateObjectById(user)
                this.initPage()
                this.close()
                    break;
                default:
                    break;
            }
        },
        initActiveBook () {
            let sqlLib = SqlLib.getInstance(window.$DBDIR)
            let user = SqlLibUser.queryCurrentUser(sqlLib)
            let publisherId = SqlLibBook.queryPublisherIdBybookId(sqlLib, this.bookId)
            this.getPublisher(sqlLib)
            console.log(this.bookId);
            this.bookList = []
            if (this.bookId) {
                if (this.bookId == user.id) {
                    this.getBook(sqlLib, this.editionId)
                }else{
                    this.edition.some((v, i) => {
                        if (v.id === publisherId) {
                            this.active = i
                            this.getBook(sqlLib, this.edition[i].id)
                            return true
                        }
                    })
                    this.bookList.some((v, i) => {
                        if (v.id === this.bookId) {
                            this.initActiveIndex = i
                            v.checked = true
                            console.log('v------------',v,i);
                            // if (this.activeCourse == 0) {
                            //     this.changeEdition(i)
                            // }
                            this.checkId = v.id
                        }
                    })
                } 
            }else{
                this.getBook(sqlLib, this.editionId)
            }
            if (this.edition.length == 0 ) {
                this.bookList = []
            }
        },
        getPublisher (sqlLib) {
            let user = SqlLibUser.queryCurrentUser(sqlLib)
            this.eduLevelId = user.eduLevelId
            let editionArr = SqlLibBook.queryPublisher(sqlLib, this.eduLevelId)
            console.log('editionArr',editionArr);
            this.edition = []
            editionArr.forEach((item , i)=>{
                if (this.activeCourse == 0) {
                    if (item.reverse1 == '0') {//教材课程
                        this.edition.push(item)
                    }
                }else if(this.activeCourse == 1){
                    if (item.reverse1 == '1') {//创新课程
                        this.edition.push(item)
                    }
                }
            })

            console.log(this.edition);
            this.editionId = editionArr[0].id
        },
        getBook (sqlLib, editionId) {
            const user = SqlLibUser.queryCurrentUser(sqlLib)
            console.log(user);
            this.bookList = SqlLibBook.queryBookByEitionId(sqlLib, editionId)
            this.bookList.forEach((v, i) => {
                v.isAuthorize = new Buffer(cryUtil.aesDecrypt(v.isAuthorize, v.id, true), "base64").toString("utf8");
                if (v.id !== this.checkId) {
                    this.$set(v, 'checked', false)
                } else {
                    this.$set(v, 'checked', true)
                    this.chooseBookList.splice(0, 1, v)
                }
            })
        },
        // getUser(){
        //     let sqlLib = SqlLib.getInstance(window.$DBDIR)
        //     this.eduLevelId = SqlLibUser.queryCurrentUser(sqlLib).eduLevelId
        // },
        changeEdition (i) {
            // if (this.activeCourse == 1) {
            //     console.log('拓展课程');
            //     const activeBottom = document.getElementsByClassName('activeBottom')
            //     const left = (Number(i - 0)*84 + 14).toString() + 'px'
                
            //     activeBottom[0].style.left = left
            // }else{
            //     console.log('同步课程');
                
            //     setTimeout(() => {
            //         const activeBottom = document.getElementsByClassName('activeBottom')
            //         let initL = (this.edition[i].name.length/8)*(this.edition[i].name.length/8)*36
            //         const left = (Number(i - 0)*132 + initL).toString() + 'px'
            //         console.log(initL,activeBottom);
            //         activeBottom[0].style.left = left
            //     }, 10);
            // }
            let sqlLib = SqlLib.getInstance(window.$DBDIR)
            this.active = i
            if (this.edition[i]) {
                this.editionId = this.edition[i].id
                this.getBook(sqlLib, this.editionId)
            }else{
                console.log('eeempty');
                this.bookList = []
            }
            console.log('this.edition[i]',i,this.edition[i]);
            
        },
        check (e, index) {
            // if (this.bookList[index].isAuthorize === '未授权') return
            console.log(e,index);
            if (this.bookList[index].checked == true) {
                return
            }else{
                this.bookList.forEach((v, i) =>{
                    if (v.checked == true) {
                        v.checked = false
                    }
                })
                // console.log('选择了----------',this.bookList[index].name);
                this.bookList[index].checked = true
                this.checkId = this.bookList[index].id
            }
        },
        submit () {
            if (!this.checkId) {
                this.close()
                return
            }
            let id = this.checkId
            console.log(id);
            let sqlLib = SqlLib.getInstance(window.$DBDIR)
            let user = SqlLibUser.queryCurrentUser(sqlLib)
            if (this.checkId === user.bookId ) {
                this.close()
                return
            }

            // api_lessson.getChapterLessonByBookId({
            //     bookId:id
            // }).then(res=>{
            //     console.log(res);
            // })
            // let result = SqlLibBook.queryChapterLessonByBookId(sqlLib, id)
            // console.log(result);
            //离线状态
            if (!localStorage.isOffline || localStorage.isOffline == "true") {//离线
                let result = SqlLibBook.queryChapterLessonByBookId(sqlLib, id);
                if (result == null) {//没查到
                    this.$message.warning("该教材资源尚未下载，未联网无法切换");
                    return
                }
            }
            user.bookId = id
            sqlLib.updateObjectById(user)
            let publisherId = SqlLibBook.queryPublisherIdBybookId(sqlLib,user.bookId)
            let publisher = SqlLibBook.queryPublisherTypeBybookId(sqlLib,publisherId)
            let isOutLesson = false
            if (publisher[0]) {
                isOutLesson = publisher[0].reverse1 == '1' 
            }
            bus.$emit('isOutLesson', isOutLesson)
            this.close()
            this.initPage()
        },
        close () {
            this.$emit('update:visible', false)
        },
        computeThumb (thumb) {
            return path.resolve(window.$DATADIR, "resc", "publisher", thumb)
        },
        //加载失败则重新加载
        error (e) {
            setTimeout(() => {
                e.target.src = e.target.src
            }, 500);
        }
    }
}
</script>

<style lang="scss">
#change-textbook {
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999!important;
    .textbook-containter {
        width: 880px;
        height: 560px;
        border-radius: 8px;
        padding: 0 20px;
        background-color: #fff;
        background-image: url("./img/changePublishBg.png");
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        overflow: hidden;
        .visible {
            position: absolute;
            top: 18px;
            right: 18px;
            width: 11px;
            height: 12px;
            z-index: 1024;
        }
        .publishType{
            margin-top: 20px;
            display: flex;
            justify-content:center;
            button{
                margin: 0;
                width: 88px;
                height: 32px;
                cursor: pointer;
                border:none;
                background-color: #fff;
            }
            button:nth-child(1){
                transform: translateX(3px);
                border-top: 1px solid #0085FF;
                border-left: 1px solid #0085FF;
                border-bottom: 1px solid #0085FF;
                border-radius: 4px 0px 0px 4px;
            }
            button:nth-child(2){
                transform: translateX(-3px);
                border-top: 1px solid #0085FF;
                border-right: 1px solid #0085FF;
                border-bottom: 1px solid #0085FF;
                border-radius: 0px 4px 4px 0px;
            }
            .activePublish{
                background-color: #0085FF !important;
                color: #FFFFFF;
            }
            .myCourse{
                img , div{
                    cursor: pointer;
                }
                display: flex;
                align-items: center;
                position: absolute;
                right: 50px;
                top: 27px;
            }
        }
        .edtion {
            position: relative;
            display: flex;
            margin-top: 20px;
            .item-content {
                margin-right: 26px;
                color: #606266;
            }
            .item-content-active {
                font-weight: bold;
                color: #0085FF !important;
            }
            .activeBottom{
                position: absolute;
                bottom: -5px;
                width: 28px;
                height: 2px;
                background: #0085FF;
                border-radius: 2px;
                transition: all .3s;
            }
            .initLeft0{
                left: 36px;
            }
            .initLeft1{
                left: 14px;
            }
        }
    }
    .top-title {
        width: 100%;
        height: 64px;
        background-color: #f4f4f4;
        position: relative;
        .close {
            top: 10px;
            right: 10px;
            position: absolute;
            img {
                width: 9px;
                height: 9px;
            }
        }
    }
    .complete-btn {     
        background: linear-gradient(270deg, #46DDFF 0%, #0085FF 100%);        
        border-radius: 4px;
        display: block;
        width: 120px;
        height: 40px;
        position: absolute;
        bottom: 20px;
        left: calc(50% - 60px);
        color: #fff;
        border: none;
        outline: none;
    }
    .midwhiteBg{
        img{
            z-index: -100;
            height: 36px;
            width: 830px;
        }
        position: absolute;
        left: 0px;
        top: 180px;
    }
    .bottomwhiteBg{

    }
    .textbook {
        // padding: 0 29px;
        display: flex;
        justify-content: space-between;
        position: relative;
        overflow-x: hidden;
    }
    .book {
        padding: 0 29px;
        margin-top: 25px;
        height: 360px;
        display: grid;
        grid-template-columns: repeat(6, 110px);
        grid-template-rows: repeat(auto-fill, 155px);
        grid-gap: 38px 24px;
        height: 367px;
        overflow-x: hidden;
    }
    .checkedBorder{
        border: 4px solid #0085FF;
    }
    .book-item {
        position: relative;
        // margin-right: 10px;
        .authorize-logo {
            text-align: center;
            font-size: 12px;
            background: #F7B500;
            color: #fff;
            border-radius: 0px 0px 0px 4px;
            width: 48px;
            height: 24px;
            line-height: 24px;
            position: absolute;
            top: 0px;
            right: -0px;
        }
        .no_authorize{
            text-align: center;
            font-size: 12px;
            background: #909399;
            color: #fff;
            border-radius: 0px 0px 0px 4px;
            width: 48px;
            height: 24px;
            line-height: 24px;
            position: absolute;
            top: 0px;
            right: -0px;
        }
        .thump-img {
            width: 100%;
            height: 100%;
        }
        .book-message {
            position: absolute;
            bottom: 0px;
            width: 100%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            background:rgba(0, 0, 0, 0.6)
        }
        .checkedMsg{
            background:rgba(0,133,255, 0.6) !important; 
        }
        .checked {
            width: 100%;
            z-index: 1000;
            img {
                z-index: 1000;
                width: 38px;
                height: 38px;
                position: absolute;
                right: -19px;
                bottom: -19px;
            }
        }
    }
}
@media screen and(max-width: 1439px) {
    #change-textbook {
        .textbook-containter {
            width: 800px;
            height: 450px;
        }
        .top-title {
            height: 45px;
            .close {
                top: 10px;
                right: 10px;
                position: absolute;
                img {
                    width: 9px;
                    height: 9px;
                }
            }
        }
        .complete-btn {
            border-radius: 8px;
            display: block;
            width: 100px;
            height: 30px;
            margin-top: 20px;
        }
        .textbook {
            padding: 0px 20px;
            margin-top: 15px;
            // display: flex;
            .edition {
                .edition-items {
                    margin-right: 15px;
                    margin-top: 25px;
                    width: 130px;
                    height: 270px;
                    .item-content {
                        width: 100%;
                        height: 35px;
                        line-height: 35px;
                        // color: #fff;
                    }
                }
            }
        }
        .book {
            margin-top: 25px;
            height: 270px;
            grid-template-columns: repeat(6, 90px);
            grid-template-rows: repeat(6, 127px);
            grid-gap: 15px 15px;
        }
        .book-item {
            .book-message {
                height: 25px;
                line-height: 25px;
            }
            .checked {
                height: 102px;
                width: 100%;
                img {
                    width: 25px;
                    height: 25px;
                }
            }
        }
    }
}
</style>
